<!--
 @description 自定义导航-目录-关联帮助中心内容
 @fileName DirectoryContent.vue
 @author zengqiongying
 @created 2023/09/05 14:33:09
-->
<template>
  <div class="directory-content-list">
    <List
      ref="list"
      :finished.sync="finished"
      :reset-fun="resetData"
      :load="load"
      :refresh="load"
      :set-page-size="10"
    >
      <div v-for="(g,i) in list" :key="i" class="list-item" :class="{'small':picShowType==='small' && g.coverUrl}" @click="handleClick(g)">
        <template v-if="picShowType==='small' && g.coverUrl">
          <div class="i-content">
            <div class="item-img">
              <ImageVideo lazy-load :host="imgHost" :src="g.coverUrl" fit="fill" />
              <svg-icon v-if="g.contentType===2" icon-class="bofang-solid" class="icon-video" />
            </div>
            <div class="item-content">
              <div class="i-name">{{ g.title }}</div>
            </div>
          </div>
          <div class="i_bottom">
            <span class="i-icon">{{ g.readNum || 0 }}</span>
            <span>{{ g.lastUpdateTime | filterTime }}</span>
          </div>
        </template>
        <template v-else>
          <div v-if="g.coverUrl" class="item-img">
            <ImageVideo lazy-load :host="imgHost" :src="g.coverUrl" fit="fill" />
            <svg-icon v-if="g.contentType===2" icon-class="bofang-solid" class="icon-video" />
          </div>
          <div class="item-content">
            <div class="i-name">{{ g.title }}</div>
            <div class="i_bottom">
              <span class="i-icon">{{ g.readNum || 0 }}</span>
              <span>{{ g.lastUpdateTime | filterTime }}</span>
            </div>
          </div>
        </template>
      </div>
    </List>
  </div>
</template>

<script>
import List from '@/components/PageList'
import ImageVideo from '@/components/ImageVideo'
import { parseTime } from '@/utils'
import { getContentList } from '@/apis/helpCenter'
export default {
  name: 'DefineTabDirectoryContent',
  components: {
    List, ImageVideo
  },
  filters: {
    filterTime(val) {
      return parseTime(val, '{y}.{m}.{d} {h}:{i}:{s}')
    }
  },
  props: {
    contentIds: {
      // 帮助中心内容ID
      type: String,
      default: ''
    },
    picShowType: {
      type: String,
      default: '' // 图片类型：small 小图，big 大图
    },
    sortKey: {
      type: String,
      default: '' // 排序字段
    }
  },
  data() {
    return {
      imgHost: `${process.env.VUE_APP_ADS_STATIC}`,
      list: [],
      finished: false
    }
  },
  watch: {
    contentIds: {
      handler(val, old) {
        this.resetPageData()
      },
      immediate: true
    },
    sortKey(val, oldVal) {
      this.resetPageData()
    }
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    async load(page, rows) {
      if (!this.contentIds || this.contentIds.length === 0) {
        this.finished = true
        return
      }
      const params = {
        page,
        rows,
        contentIds: this.contentIds,
        classifyCode: 'ALL'
      }
      if (this.sortKey) {
        params.sort = this.sortKey
      }
      return getContentList(params).then(res => {
        const data = res.data
        this.list.push(...data.records)
        if (data.total <= this.list.length) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    handleClick(g) {
      this.$router.push({ name: 'HelpCenterDetail', params: { id: g.id }, query: { hide: 1 }})
    }
  }
}

</script>
<style lang='less' scoped>
.directory-content-list{
  padding:18px 16px 0;
  .list-item{
    // --width: calc(100vw - 32px - 90px);
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
    .item-img{
      width: 100%;
      // height: calc(var(--width) * 238 / 255);
      height: auto;
      background: #D8D8D8;
      border-radius: 6px 6px 0px 0px;
      position: relative;
      .icon-video{
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 40px;
        color: rgba(255, 255, 255, .8);
      }
      // &.small{
      //   height: calc(var(--width) * 120 / 255);
      // }
    }
    .item-content{
      padding: 10px;
      .i-name{
        font-size: 14px;
        color: #343640;
        line-height: 20px;
      }
    }

    .i_bottom{
      margin-top: 10px;
      width: 100%;
      height: 16px;
      line-height: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#AAAAAA;
      font-size:12px;
    }
    .i-icon{
      display: flex;
      align-items: center;
      &::before{
        content: '';
        width: 16px;
        height: 16px;
        margin-right: 5px;
        background: url(~@/assets/icon-view.png) no-repeat;
        background-size: 16px 16px;

      }
    }

    &.small{
      padding:10px;
      .i-content{
        display: flex;
      }
      .item-img{
        width:74px;
        height: 56px;
        border-radius: 4px;
        overflow: hidden;
        background: #f5f5ff;
        position: relative;
      }
      .item-content{
        padding:0;
        margin-left: 10px;
        flex: 1;
        height: 56px;
        display:flex;
        align-items: center;
        .i-name{
          width: 100%;
          max-height: 56px;
          line-height: 26px;
          font-size: 14px;
          color: #333333;
          letter-spacing: 1px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
}

</style>
